<template>
  <Card>
    <div class="btns" style="margin-bottom:10px;">
      <upload-file ref="uploadCardFile" button-name="养老" @on-change="uploadData($event, 'yl')"></upload-file>
      <upload-file ref="uploadCardFile" button-name="工伤" @on-change="uploadData($event, 'gs')"></upload-file>
      <upload-file ref="uploadCardFile" button-name="失业" @on-change="uploadData($event, 'sy')"></upload-file>
      <upload-file ref="uploadCardFile" button-name="个税" @on-change="uploadData($event, 'gss')"></upload-file>
      <upload-file ref="uploadCardFile" button-name="其他项" @on-change="uploadData($event, 'other')"></upload-file>
    </div>
    <Tabs value="行政人员">
      <TabPane label="行政人员" name="行政人员">
        <Form ref="searchCardForm" :label-width="90" :model="searchCardForm" inline>
          <FormItem label="日期：" prop="date">
            <DatePicker
              v-model="searchCardForm.date"
              format="yyyy-MM"
              placeholder="选择时间"
              type="month"
              @on-change="searchCardForm.date=$event"
            ></DatePicker>
          </FormItem>
          <Form-item style="margin-left:-90px;">
            <Button icon="md-search" type="primary" @click="handleSearch('card')">搜索</Button>
            <Button @click="handleReset('card')">重置</Button>
          </Form-item>
        </Form>
        <Table
          :columns="cardColumns"
          :data="cardData"
          :loading="cardLoading"
          border
          size="small"
          stripe
        ></Table>
        <Row class="page" justify="end" type="flex">
          <Page
            :current="searchCardForm.pageNumber"
            :page-size="searchCardForm.pageSize"
            :total="cardTotal"
            show-total
            @on-change="changePage($event, 'card')"
          />
        </Row>
      </TabPane>
      <TabPane label="驾驶员" name="驾驶员">
        <Form ref="searchPostForm" :label-width="90" :model="searchPostForm" inline>
          <FormItem label="日期：" prop="date">
            <DatePicker
              v-model="searchPostForm.date"
              format="yyyy-MM"
              placeholder="选择时间"
              type="month"
              @on-change="searchPostForm.date=$event"
            ></DatePicker>
          </FormItem>
          <Form-item style="margin-left:-90px;">
            <Button icon="md-search" type="primary" @click="handleSearch('post')">搜索</Button>
            <Button @click="handleReset('post')">重置</Button>
          </Form-item>
        </Form>
        <Table
          :columns="postColumn"
          :data="postData"
          :loading="postLoading"
          border
          size="small"
          stripe
        ></Table>
        <Row class="page" justify="end" type="flex">
          <Page
            :current="searchPostForm.pageNumber"
            :page-size="searchPostForm.pageSize"
            :total="postTotal"
            show-total
            @on-change="changePage($event, 'post')"
          />
        </Row>
      </TabPane>
    </Tabs>
    <Modal v-model="modal" :closable="false" :mask-closable="false" width="360">
      <p slot="header" style="color:#2d8cf0;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>文件上传成功，正在导入数据</span>
      </p>
      <div style="text-align:center">
        <Button :loading="importLoading" long size="large" type="error">导入中...</Button>
      </div>
      <div slot="footer"></div>
    </Modal>
  </Card>
</template>
<script>
import UploadFile from '../my-components/upload-file'
import {adminRecordList, driverRecordList, importGs, importOther, importSy, importYl} from '../../api/pay'

export default {
  components: {
    UploadFile
  },
  data() {
    return {
      cashSelectList: [],
      cashSelectCount: 0,
      cashSubmitLoading: false,
      cashModalType: 0,
      cashModalVisible: false,
      cashModalTitle: '',
      cashForm: {
        date: '',
        license_plate_num: '',
        cash_income: 0
      },
      searchCardForm: {
        date: '',
        pageNumber: 1,
        pageSize: 10
      },
      searchPostForm: {
        date: '',
        pageNumber: 1,
        pageSize: 10
      },
      cardLoading: false,
      postLoading: false,
      cardData: [],
      postData: [],
      modal: false,
      importLoading: false,
      loading: false,
      cardTotal: 0,
      postTotal: 0,
      cardColumns: [
        {
          type: 'index',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '姓名',
          key: 'name',
          align: 'center',
          width: 100,
          fixed: 'left'
        },
        {
          title: '日期',
          key: 'date',
          width: 100,
          align: 'center'
        },
        {
          title: '基本工资',
          key: 'base_pay',
          align: 'right',
          width: 100
        },
        {
          title: '岗位工资',
          key: 'job_pay',
          align: 'right',
          width: 100
        },
        {
          title: '绩效工资',
          key: 'performance_pay',
          align: 'right',
          width: 100
        },
        {
          title: '车补',
          key: 'car_allowance',
          align: 'right',
          width: 100
        },
        {
          title: '工龄工资',
          key: 'seniority_pay',
          align: 'right',
          width: 100
        },
        {
          title: '降温费',
          key: 'cool_fee',
          align: 'right',
          width: 100
        },
        {
          title: '加班费',
          key: 'overtime_pay',
          align: 'right',
          width: 100
        },
        {
          title: '补发调资差额',
          key: 'difference_pay',
          align: 'right',
          width: 120
        },
        {
          title: '请假',
          key: 'leave_deductions',
          align: 'right',
          width: 100
        },
        {
          title: '迟到罚款',
          key: 'late_deductions',
          align: 'right',
          width: 100
        },
        {
          title: '未满年限服装费',
          key: 'clothes_cost',
          align: 'right',
          width: 130
        },
        {
          title: '养老',
          key: 'endowment_insurance',
          align: 'right',
          width: 100
        },
        {
          title: '医保',
          key: 'medical_insurance',
          align: 'right',
          width: 100
        },
        {
          title: '失业',
          key: 'unemployment_insurance',
          align: 'right',
          width: 100
        },
        {
          title: '工伤',
          key: 'injury_insurance',
          align: 'right',
          width: 100
        },
        {
          title: '公积金',
          key: 'accumulation_fund',
          align: 'right',
          width: 100
        },
        {
          title: '个税',
          key: 'individual_income_tax',
          align: 'right',
          width: 100
        },
        {
          title: '会费',
          key: 'tu_membership_dues',
          align: 'right',
          width: 100
        }
      ],
      postColumn: [
        {
          type: 'index',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '姓名',
          key: 'name',
          align: 'center',
          width: 100,
          fixed: 'left'
        },
        {
          title: '日期',
          key: 'date',
          width: 100,
          align: 'center'
        },
        {
          title: '基本工资',
          key: 'base_pay',
          align: 'right',
          width: 100
        },
        {
          title: '修车补助',
          key: 'fix_car_allowance',
          align: 'right',
          width: 100
        },
        {
          title: '工龄工资',
          key: 'seniority_pay',
          align: 'right',
          width: 100
        },
        {
          title: '收卡奖励',
          key: 'sell_card_rewards',
          align: 'right',
          width: 100
        },
        {
          title: '加班费',
          key: 'overtime_pay',
          align: 'right',
          width: 100
        },
        {
          title: '单车核算奖罚',
          key: 'bicycle_accounting',
          align: 'right',
          width: 120
        },
        {
          title: '降温费',
          key: 'cool_fee',
          align: 'right',
          width: 100
        },
        {
          title: '养老',
          key: 'endowment_insurance',
          align: 'right',
          width: 100
        },
        {
          title: '医保',
          key: 'medical_insurance',
          align: 'right',
          width: 100
        },
        {
          title: '失业',
          key: 'unemployment_insurance',
          align: 'right',
          width: 100
        },
        {
          title: '工伤',
          key: 'injury_insurance',
          align: 'right',
          width: 100
        },
        {
          title: '个人所得税',
          key: 'individual_income_tax',
          align: 'right',
          width: 100
        },
        {
          title: '会费',
          key: 'tu_membership_dues',
          align: 'right',
          width: 100
        }
      ],
      lines: []
    }
  },
  mounted() {
    this.init()
    this.getLinesArray()
  },
  methods: {
    async getLinesArray() {
      this.lines = await this.getLines()
    },
    changePage(v, event) {
      switch (event) {
        case 'card':
          this.searchCardForm.pageNumber = v
          this.getAdminRecordList()
          break
        case 'post':
          this.searchPostForm.pageNumber = v
          this.getIncomePostList()
          break
      }
    },
    getAdminRecordList() {
      this.cardLoading = true
      adminRecordList(this.searchCardForm).then(res => {
        this.cardLoading = false
        if (res.data) {
          this.cardData = res.data.personnel
          this.cardTotal = res.data.count
        }
      })
    },
    getDriverRecordList() {
      this.cashSelectCount = 0
      this.cashSelectList = []
      this.cashLoading = true
      driverRecordList(this.searchPostForm).then(res => {
        this.postLoading = false
        if (res.data) {
          this.postData = res.data.personnel
          this.postTotal = res.data.count
        }
      })
    },
    handleReset(event) {
      switch (event) {
        case 'card':
          this.$refs.searchCardForm.resetFields()
          this.searchCardForm.pageNumber = 1
          this.searchCardForm.pageSize = 10
          this.getAdminRecordList()
          break
        case 'post':
          this.$refs.searchPostForm.resetFields()
          this.searchPostForm.pageNumber = 1
          this.searchPostForm.pageSize = 10
          this.getDriverRecordList()
          break
      }
    },
    handleSearch(event) {
      switch (event) {
        case 'card':
          this.searchCardForm.pageNumber = 1
          this.searchCardForm.pageSize = 10
          this.getAdminRecordList()
          break
        case 'post':
          this.searchPostForm.pageNumber = 1
          this.searchPostForm.pageSize = 10
          this.getDriverRecordList()
          break
      }
    },
    init() {
      this.getAdminRecordList()
      this.getDriverRecordList()
    },
    uploadData(event, cardType) {
      this.modal = true
      this.importLoading = true
      switch (cardType) {
        case 'yl':
          importYl({url: event.url}).then(res => {
            if (res.data) {
              this.$Message.success(res.message)
              this.init()
            } else {
              this.$Message.error(res.message)
            }
            this.modal = false
            this.importLoading = false
          })
          break
        case 'gs':
          importGs({url: event.url}).then(res => {
            if (res.data) {
              this.$Message.success(res.message)
              this.init()
            } else {
              this.$Message.error(res.message)
            }
            this.modal = false
            this.importLoading = false
          })
          break
        case 'sy':
          importSy({url: event.url}).then(res => {
            if (res.data) {
              this.$Message.success(res.message)
              this.init()
            } else {
              this.$Message.error(res.message)
            }
            this.modal = false
            this.importLoading = false
          })
          break
        case 'other':
          importOther({url: event.url}).then(res => {
            if (res.data) {
              this.$Message.success(res.message)
              this.init()
            } else {
              this.$Message.error(res.message)
            }
            this.modal = false
            this.importLoading = false
          })
          break
      }
    }
  }
}
</script>
<style>
.ivu-tabs .ivu-select-dropdown {
  left: 0 !important;
}
</style>
